<!--
 * @Author: xjt
 * @Date: 2021-06-24 23:29:47
 * @LastEditTime: 2021-07-09 20:58:18
 * @Description: 隔离人员综合管理
 * @LastEditors: cqg
-->
<template>
  <basic-container v-loading="loading" element-loading-text="数据加载中...">
    <dataList
      placeholder="请输入姓名"
      searchName="name"
      :pageInfo="pager"
      :listData="tableData"
      :filterList="filterList"
      :selectData="selectDataArr"
      :dataInfo="dataInfo"
      :operaInfo="operaInfo"
      :openIndex="true"
      :operaColumnWidth="160"
      @btn-click="handleBtnClick"
    >
      <div slot="buttons" class="btns">
        <el-button size="small" type="primary" @click="handleMenuClick('import')">隔离人员导入</el-button>
        <v-dialog v-if="dialogShow" :show.sync="dialogVisible" width="800px" title="文件上传">
          <v-upload ref="fileUpload" modelType="file" @onSuccess="onSuccess" @onError="onError" :autoLoadFiles="false" :isView="false" multiple v-model="fileList" />
          <span slot="foot">
            <el-button @click="handleCancel">取 消</el-button>
            <el-button v-throttle="[commit]">上 传</el-button>
          </span>
          <div class="upload-error-list" v-if="errorList.length">
            <h5>失败原因：</h5>
            <div class="error-list">
              <p v-for="(err,index) in errorList" :key="index">{{err.errorMsg}}</p>
            </div>
          </div>
        </v-dialog>
        <el-button size="small" type="primary" @click="handleMenuClick('export')">下载隔离人员模板</el-button>
      </div>
    </dataList>
    <InfoTabs ref="infoTabs" :componentHideIds="componentIds" />
    <editDialog ref="previewRef" />
    <adialog title="新增" width="600px" ref="dialog" @submit="submit"></adialog>
    <infoEdit ref="infoEdit"></infoEdit>
    <humanisticCare ref="humanisticCare"></humanisticCare>
    <!-- 新增|编辑|查看 单位 -->
  </basic-container>
</template>



<script>
import {
  getpagequery,
  synUpdatePersonInfoManual,
} from "@/views/yq-personnel/api/health.js";
// import { getListHotel } from "@/views/yq-hotel/api/room.js";
// import InfoTabs from "./components/InfoTabs.vue";
import InfoTabs from "@/components/business/user-details/index.vue";
import editDialog from "./edit.vue";
import adialog from "./dialog";
import infoEdit from "@/views/yq-personnel/multipleManage/components/infoEdit";
import humanisticCare from "@/views/yq-personnel/multipleManage/components/humanisticCare";
import { extractName } from "@/utils/extract";
import dateFormate from "@/assets/js/date";
export default {
  name: "multipleManage",
  components: { InfoTabs, editDialog, adialog, infoEdit, humanisticCare },
  provide () {
    return {
      initList: this.queryData,
      personId: () => this.currentPersonId,
      moveInfoId: () => this.currentMoveInfoId,
      hotelBaseInfoId: () => this.currentHotelBaseInfoId,
      moveEndTime: () => this.moveEndTime,
    };
  },
  mounted () {
    // 请求列表数据
    if (this.$route.meta.isHistory) {
      this.isHistory = true;
      //历史隔离人员
      this.params.personState = "31,41,42,43,44,63,64,65,66";
    } else {
      //在管隔离人员
      this.params.personState = "21,22";
    }
    this.queryData();
  },
  computed: {
    // 操作按钮
    operaInfo () {
      if (this.isHistory) {
        return ["preview"];
      } else {
        return [
          { label: "编辑", name: "edit" },
          "preview",
          { label: "同步", name: "synchro" },
          {
            label: "隔离延期",
            name: "add",
          },
          {
            label: "入住变更",
            name: "infoEdit",
          },
          // {
          //   label: "人文关怀",
          //   name: "humanisticCare",
          // },
        ];
      }
    },
    // 筛选项
    filterList () {
      return [
        { label: "电话号码", inputType: "input", name: "telPhone" },
        { label: "证件号码", inputType: "input", name: "cardId" },
        { label: "房号", inputType: "input", name: "roomNum" },
        {
          label: "入住时间",
          inputType: "daterange",
          name: ["moveStartTime", "moveEndTime"],
        },
        {
          label: "人员类型",
          inputType: "dict",
          name: "personClassify",
          dictName: "person_classify",
        },
      ];
    },
    dataInfo () {
      return [
        { label: "隔离点名称", prop: "hotelName" },
        // { label: "详细地址", prop: "hotelAddr" },
        { label: "房号", prop: "roomNum", width: "80px", sortable: true },
        { label: "姓名", prop: "name", width: "100px" },
        // {
        //   label: "证件类型",
        //   prop: "cardType",
        //   formatter: this.dataFormatter,
        //   width: "100px",
        // },
        // { label: "证件号码", prop: "cardId", width: "200px" },
        { label: "电话号码", prop: "telPhone", width: "160px" },
        {
          label: "入住开始时间",
          prop: "moveStartTime",
          formatter: this.dataFormatter,
          sortable: true,
        }, // 去掉秒的显示
        {
          label: "入住终止时间",
          prop: "moveEndTime",
          formatter: this.dataFormatter,
          sortable: true,
        }, // 去掉秒的显示
        {
          label: "人员类型",
          prop: "personClassify",
          formatter: this.dataFormatter,
          "show-overflow-tooltip": true, // 请求接口
        },
        {
          label: "心里评估等级",
          prop: "assessmentRiskLevel",
        },
        {
          label: "是否关爱人员",
          prop: "sign",
          formatter: this.dataFormatter,
        },
        {
          label: "人员状态",
          prop: "personState",
          formatter: this.dataFormatter,
        },
      ];
    },
  },
  data () {
    return {
      // 表格列表数据
      componentIds: [5, 6, 7, 8],
      tableData: [],
      currentPersonId: "",
      currentMoveInfoId: "",
      currentHotelBaseInfoId: "",
      // 请求参数
      params: {
        current: 1,
        size: 10,
        keyword: "",
      },
      // 选中的数据
      selectDataArr: [],
      // 分页
      pager: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 10, // 每页显示多少条
      },
      // 页面loading
      loading: false,
      // hotelList: [],
      isHistory: false,
      dialogVisible: false,
      dialogShow: false,
      fileList: [],
      errorList: [],
    };
  },
  methods: {
    //格式化表格字典值
    dataFormatter (row, column, cellValue) {
      switch (column.property) {
        case "cardType":
          return extractName("card_type", row.cardType);
        case "personState":
          return extractName("person_state", row.personState);
        case "personClassify":
          return extractName("person_classify", row.personClassify);
        case "moveStartTime":
          return (
            row.moveStartTime &&
            dateFormate.datasng(row.moveStartTime, "yyyy-MM-dd hh:mm")
          );
        case "moveEndTime":
          return (
            row.moveEndTime &&
            dateFormate.datasng(row.moveEndTime, "yyyy-MM-dd hh:mm")
          );
        case "sign":
          return row.sign == 1 ? "是" : "否";
        default:
          break;
      }
    },
    // 数据请求
    queryData (params = {}) {
      this.loading = true;
      let requestData = { ...this.params, ...params, qt: "ldgl" };
      if (requestData.signingDateStart == "") {
        delete requestData.signingDateStart;
      }
      if (requestData.signingDateEnd == "") {
        delete requestData.signingDateEnd;
      }
      getpagequery(requestData)
        .then((res) => {
          const { current, size, total, records } = res.data.data;
          this.tableData = records;
          this.params = requestData;
          this.pager = { total, current, size };
        })
        .finally(() => {
          this.loading = false;
        });
    },
    submit () {
      // 刷新列表
      // this.params.current = 1;
      this.queryData();
    },
    deleteData (id) { },
    //表格按钮点击事件监听
    handleBtnClick ({ type, row }) {
      console.log(type);
      this.currentMoveInfoId = row.moveInfoId;
      this.currentPersonId = row.personId;
      this.currentHotelBaseInfoId = row.hotelBaseInfoId;
      switch (type) {
        //查看
        case "preview":
          this.$refs.infoTabs.show({ type, row });
          this.moveEndTime = row.moveEndTime;
          break;
        //编辑
        case "edit":
          this.$refs.previewRef.show({ type, row, dialogTitle: "编辑窗口" });
          break;
        case "synchro":
          //同步一码通
          this.synUpdatePersonInfo(row.personId);
          break;
        case "add":
          this.$refs.dialog.changeVisible({ type, row });
          break;
        case "infoEdit":
          this.$refs.infoEdit.show(row);
          break;
        case "humanisticCare":
          this.$refs.humanisticCare.show(row);
          break;
      }
    },
    synUpdatePersonInfo (personId) {
      this.loading = true;
      synUpdatePersonInfoManual(personId)
        .then((res) => {
          if (res.data.data) {
            this.$message.success("同步成功！");
          } else {
            this.$message.error("同步失败！");
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 菜单点击监听
    handleMenuClick (type) {
      switch (type) {
        case "import":
          // 导入
          this.dialogShow = true;
          this.dialogVisible = true;
          this.errorList = [];
          break;
        case "export":
          //  导出模板
          this.publicExport("隔离人员信息模板", "/jdglpersoninfo/download");
          break;
      }
    },
    //文件上传
    async onSuccess (response, file, fileList) {
      console.log(response);
      if (fileList === undefined || fileList.length <= 0) {
        this.$message.error("请选择要上传的文件！");
      } else {
        this.$message.success(response.msg);
        this.dialogVisible = false;
        this.dialogShow = false;
        this.queryData({ current: 1 });
      }
    },
    onError (err) {
      // 上传失败
      this.errorList = err.data || [];
      // this.$message.success(err.msg);
    },
    //确定
    commit () {
      this.$refs.fileUpload.submit(
        "/jdglpersoninfo/excelHousePersoninfoImport"
      );
    },
    // 取消
    handleCancel () {
      this.dialogVisible = false;
      this.dialogShow = false;
    },
    // async getHotelList() {
    //   let response = await getListHotel(1);
    //   this.hotelList = response.data.data.map((item) => ({
    //     lable: item.hotelName,
    //     value: item.hotelBaseInfoId,
    //   }));
    // },
  },
};
</script>
<style lang="scss" scoped>
.operateMain {
  /deep/ .top-buttons {
    float: right;
    width: 50%;
  }
  /deep/ .v-search {
    width: 50%;
    justify-content: flex-start;
  }
  /deep/ .operaColumn .el-button {
    color: var(--color);
    text-align: center;
  }
}
.btns {
  display: flex;
  justify-content: flex-end;
  .el-button {
    margin-left: 10px;
  }
  .upload-error-list {
    h5 {
      background: #eccccc;
      line-height: 29px;
      padding-left: 10px;
      margin-top: 10px;
    }
    .error-list {
      max-height: 400px;
      overflow-y: auto;
      color: rgb(179, 11, 11);
      p {
        padding: 10px;
        border-bottom: solid 1px #ccc;
      }
    }
  }
}
</style>
